<template>
  <div v-if="visible" class="global-loading">
    <div class="spinner"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount }from'vue'

// 定义一个可响应的变量来控制 Loading 的可见性
const visible = ref(false)

let timer = ref()

// 导出显示和隐藏 Loading 的方法
const showGlobalLoading = () => {
  visible.value = true
}
const hideGlobalLoading = () => {
  visible.value = false
}

window.showGlobalLoading = () => {
  showGlobalLoading()
  timer.value = setTimeout(() => {
    hideGlobalLoading()
  }, 25000)
}

window.hideGlobalLoading = () => {
  hideGlobalLoading()
}

onMounted(() => {
  
})

onBeforeUnmount(() => {
  timer.value = null
})

</script>

<script>
export default {
  name:'GlobalLoading',
}
</script>


<style scoped>
.global-loading {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background:rgba(255,255,255,0.8); */
  background:rgba(0,0,0,0.8);
  z-index:9999;
}
.spinner{
  border:4px solid rgba(0,0,0,0.1);
  border-left-color:#f8d447;
  border-radius:50%;
  width:40px;
  height:40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
0%{
  transform:rotate(0deg);
}
100%{
  transform:rotate(360deg);
}
}
</style>